<template>
  <div class="baseEventConfig">
    <el-collapse-item name="1">
      <template #title>
        <div class="flex-item">
          <div class="title">基础事件配置</div>
          <el-button :icon="Edit" @click.stop size="small">编辑</el-button>
        </div>
      </template>
      <el-card class="collapse-show-box">
        <!-- 函数体 -->
        <div v-for="eventName in BaseEvent" :key="eventName">
          <p>
            <span class="func-annotate">// {{ EventTypeName[eventName] }}</span>
            <br />
            <span class="func-keyword">async {{ eventName }}</span>
            (mouseEvent,components) {
          </p>
          <p>}<span>,</span></p>
        </div>
      </el-card>
    </el-collapse-item>
  </div>
</template>

<script setup>
import { Edit } from "@element-plus/icons-vue"

const BaseEvent = {
  // 点击
  ON_CLICK: "click",
  // 双击
  ON_DBL_CLICK: "dblclick",
  // 移入
  ON_MOUSE_ENTER: "mouseenter",
  // 移出
  ON_MOUSE_LEAVE: "mouseleave",
}

const EventTypeName = {
  [BaseEvent.ON_CLICK]: "单击",
  [BaseEvent.ON_DBL_CLICK]: "双击",
  [BaseEvent.ON_MOUSE_ENTER]: "鼠标进入",
  [BaseEvent.ON_MOUSE_LEAVE]: "鼠标移出",
}
</script>

<style lang="scss" scoped>
.baseEventConfig {
  .flex-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
